<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title></title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
        </script>
<script
	src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
        </script>
<script type="text/javascript">
        $("#word_button").click(function () {
    		$.getJSON('/words', function(data) {
    			  var items = [];

    			  $.each(data, function(key, val) {
    			    items.push(val);
    			  });

    			  (items.join(',')).appendTo('#words');
    			});
    	});
        </script>
</head>
<body>
	<div data-role="page" id="page1">
		<div data-role="content">
			<div id="words">
				<input type="button" id="word_button" value="Click here to start..." />
				<label> <b> The words you need to use are... </b></label>
				<!-- words will go here -->
			</div>
			<p></p>
			<form action="/add/sentence" method="post">
				<div data-role="fieldcontain">
					<fieldset data-role="controlgroup">
						<label for="textarea7"> And the sentence is: </label>
						<textarea name="sentence" id="textarea7"
							placeholder="Enter your sentence here...">
                        </textarea>
					</fieldset>
				</div>
				<p></p>
				<input type="text" name="words" id="sentence-words" hidden="true" />
				<input type="submit" value="GO" />
			</form>
		</div>
	</div>
	<script src="/jquery/word_actions.js">
        </script>
</body>
</html>